<template>
    <div class="question-item clearfix">
        <div class="question-item__left" v-if="$slots.prefix">
            <slot name="prefix"></slot>
        </div>
        <div class="question-item__right" v-if="$slots.suffix">
            <slot name="suffix"></slot>
        </div>
        <div class="question-item__content" :style="contentStyle">
            <div>中国是哪一年成立的？ （      ） 5分</div>
            <div>
                <p>A:1991</p>
                <p>B:1949</p>
                <p>C:1929</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        prefixWidth: {
            type: Number,
            default: 20
        },
        suffixWidth: {
            type: Number,
            default: 100
        }
    },
    computed: {
        contentStyle () {
            const mgl = this.$slots.prefix ? this.prefixWidth : 0
            const mgr = this.$slots.suffix ? this.suffixWidth : 0
            return {
                marginLeft: mgl + 'px',
                marginRight: mgr + 'px'
            }
        }
    }
}
</script>
<style lang="less" scoped>
.question-item {
    & + & {
        margin-top: 10px;
    }
    padding: 10px;
    border: 1px solid #ccc;
    &__left {
        float: left;
    }
    &__right {
        float: right;
    }
    &__content {
    }
}
</style>
